<template>
  <span @click="clickWelcome">{{ welcome }}</span>
</template>

<!--等价于export default { setup() {... return {...}}}-->
<script setup>
  import { ref, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onBeforeMount } from 'vue';

  onBeforeMount(()=> {
    console.log("composition api, onBeforeMount()")
  })
  onMounted(()=> {
    console.log("composition api, onMounted()")
  })

  onBeforeUpdate(()=> {
    console.log("composition api, onBeforeUpdate()")
  })

  onUpdated(()=> {
    console.log("composition api, onUpdated()")
  })

  onBeforeUnmount(()=> {
    console.log("composition api, onBeforeUnmount()")
  })

  onUnmounted(()=> {
    console.log("composition api, onUnmounted()")
  })
  let welcome = ref("Hello World")
  function clickWelcome() {
    welcome.value = "Hello Vue3"
  }
</script>

<style scoped></style>
